import styled from 'styled-components';
export const HeaderWrapper = styled.div`
    width: 100%;
    height: 56px;
    border-bottom: 1px solid #f0f0f0;
    box-sizing: border-box;
`;
export const WidthLimit = styled.div`
    height: 56px;
    min-width: 768px;
    max-width: 1440px;
    margin: 0 auto;
    box-sizing: border-box;
    clear: both
`;
export const Logo = styled.a.attrs({
    href: '/'
})`
    display: inline-block;
    height: 56px;
    padding: 0;
    cursor: pointer;
    box-sizing: border-box;
`;

export const LogoImg = styled.img`
    height: 100%;
    vertical-align: middle;
    box-sizing: border-box;
`;

export const Nav = styled.div`
    display: inline-block;
    width: 960px;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
`;

export const NavItem = styled.div`
    display: inline-block;
    margin: 0;
    padding-left: 0;
    list-style: none;
    margin-left: -15px;
`;
export const NavItems = styled.li`
   display: inline-block;
    line-height: 56px;
    &.index {
        color: #ea6f5a;
    }
    &.downLoad {
        color: #333;
        margin-left: 20px;
    }
    &.search {
        margin-right: 10px;
        padding-left: 15px;
        position: relative;
        .zoom {
            position: absolute;
            right: 5px;
            top: 13px;
            width: 30px;
            line-height: 30px;
            border-radius: 30px;
            text-align: center;
            cursor: pointer;
            &.focused {
                background-color: #777;
            }
        }
    }
`;

export const Search = styled.input.attrs({
    placeholder: '搜索'
})`
     width: 190px;
     height: 38px;
     padding: 0 30px 0 20px;
     margin-top: 9px;
     margin-left: 20px;
     box-sizing: border-box;
     border: none;
     outline: none;
     font-size: 14px;
     border-radius: 19px;
     background: #eee;
     transition: width .5s;
     &.focused {
        width: 230px;
        transition: width .5s;
        padding-right: 40px;
     }
`;

export const SearchListWrapper = styled.div`
     width: 250px;
     background-color: #fff;
     position: absolute;
     left: 35px;
     top: 100%;
     margin-top: 2px;
     border-radius: 4px;
     box-sizing: border-box;
     box-shadow: 0 0 8px rgba(0,0,0,.2);
     padding: 20px 20px 10px;
     border-bottom: 1px solid #f0f0f0;
     &::before {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border: 12px solid transparent;
        border-bottom-color: #fff;
        left: 20px;
        bottom: 99%;
     }
`;
export const SearchListTitle = styled.div`
     line-height: 20px;
     font-size: 14px;
     color: #969696;
`;

export const SearchListSwitch = styled.span`
     float: right;
     font-size: 13px;
     padding: 0;
     border-width: 0;
     cursor: pointer;
     .spin {
         margin-right: 4px;
         display: block;
        float: left;
        transition: all .3s ease-in;
        transform-origin: center center;
     }
`;

export const SearchListItemWrapper = styled.ul`
     font-size: 0;
     line-height: 0;
     margin-top: 5px;
`;

export const SearchListItem = styled.li`
    margin-right: 10px;
    display: inline-block;
    line-height: 28px;
    box-sizing: border-box;
`;

export const SearchItemLink = styled.a`
    padding: 2px 6px;
    font-size: 12px;
    color: #787878;
    border: 1px solid #ddd;
    border-radius: 3px;
    cursor: pointer;
    box-sizing: border-box;
`;

export const LinkRight = styled.a.attrs({
    target: '_bank',
    href: '/'
})` 
    display: inline-block;
    display: inline-block;
    line-height: 24px;
    border-radius: 20px;
    font-size: 15px;
    text-align: center;
    padding: 6px 12px;
    box-sizing: border-box;
    &.writing {
      width: 100px;
      height: 40px;
      color: #fff;
      margin: 8px 12px 0;
      background-color: #ea6f5a;
      .iconfont {
        margin-right: 3px;
      }
    }
    
    &.reg {
      width: 80px;
      height: 38px;
      margin: 9px 5px 0 15px;
      border: 1px solid rgba(236,97,73,.7);
      color: #ea6f5a;
      background-color: transparent;
    }

`;

export const Login = styled.a.attrs({
    href: '/'
})` 
    font-size: 15px;
    display: inline-block;
    color: #969696;
    margin: 0 6px 0 10px;
    line-height: 1.42857;
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 4px;
    user-select: none;
    box-sizing: border-box;
`;

export const Beta = styled.div`
    display: inline-block;
    height: 55px;
    padding: 15px 0px;
    margin: 0 12px;
    box-sizing: border-box;
`;

export const LinkBeta = styled.a.attrs({
    href: '/'
})`
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: transparent;
`;

export const BetaImg = styled.img.attrs({
    href: '/'
})`
    height: 25px;
    vertical-align: middle;
    box-sizing: border-box;
`;